<template>
    <div style="display: flex;position: relative;width: 100%;height: 100%;top: 0;left: 0;">
        <div style="border-top: 1px solid #7fc4d3;;width: 200px;border-right: 1px solid #f7f7f7;position: relative;">
            <div style="background-color: #41a1b7;font-size: 12px;padding: 8px 10px;color: #ffffff;">组<i
                    style="font-size: 16px;position: absolute;right: 10px;cursor: pointer;top: 4px;"
                    class="iconfont icon-caidan" @click="showMenu"></i></div>
            <input v-if="startAddGroup" v-focus @keydown.13="addGroup($event)" placeholder="请输入群组名称..."/>

            <template v-for="(group,index) of groups">
                <div class="group" :class="selectedIndex == index?'active':''" @click="manager(group,index)">
                    {{group.name}}
                </div>
            </template>
        </div>
        <div style="width: calc(100% - 200px);position: relative;" v-if="selectedGroup != null">
            <div style="padding: 20px;" v-if="supports.length > 0">
                <div>
                    <span style="margin-right: 8px;">{{selectedGroup.name}}</span>
                    <button class="btn btn-info btn-mini" style="font-size: 12px;padding: 4px;"
                            @click="addSupport=true">新增客服
                    </button>
                </div>
                <div style="margin-top: 10px;">
                    <table width="100%">
                        <tr>
                            <th width="80px">#</th>
                            <th>用户名</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(support,index) in supports">
                            <td>{{index+1}}</td>
                            <td>{{support.userName}}</td>
                            <td>{{new Date(support.createTime).format('yyyy-MM-dd hh:mm:ss')}}</td>
                            <td><span @click="modifySupport=support" class="badge" style="font-size: 12px;cursor: pointer;background-color: #3ba2bb"><i class="fa fa-pencil"></i></span></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" v-if="addSupport">
                <div style="position: relative;width: 100%;height: 100%;">
                    <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"
                         :style="{opacity:supports.length == 0?1:0.5,background:supports.length == 0?'#ffffff':'#000000'}"
                         @click="closeAddSupport"></div>
                    <div style="left: 50%;position: absolute;background: white;margin-left: -228px;margin-top: 100px;">
                        <AddSupport :group="selectedGroup" :support="modifySupport" v-on:editSupportSuccess="editSupportSuccess" v-on:addSupportSuccess="addSupportSuccess"></AddSupport>
                        <div style="padding: 0 18px;" v-if="supports.length == 0">
                            <a class="btn btn-danger btn-block" @click="deleteGroup">
                                删除客服组
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div @blur="hideMenu" tabindex="0" v-if="!hiddenMenu" v-focus
             style="position: absolute;outline:none;top: 35px;left: 99px;background-color: #41a1b7;padding: 0 8px;line-height: 22px;width: 100px;font-size: 12px;color: white;">
            <div @click="startAddGroup = true" style="cursor: pointer;padding: 4px 0;">新增组</div>
            <!--<div style="cursor: pointer;padding: 4px 0;border-top: 1px solid rgb(127, 196, 211)">新增组</div>-->
        </div>
    </div>
</template>

<script>
    import AddSupport from './AddSupport'
    export default {
        name: 'structure',
        components: {AddSupport},
        data () {
            return {
                hiddenMenu: true,
                startAddGroup: false,
                groups: [],
                selectedIndex: 0,
                selectedGroup: null,
                modifySupport: null,
                addSupport: false,
                supports: []
            }
        }, directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        methods: {
            deleteGroup: function () {
                const that = this;
                $.post('group/delete',{groupId:this.selectedGroup.id},function () {
                    that.$router.go(0);
                });
            },
            editSupportSuccess: function (user) {
                this.modifySupport = null;
            },
            addSupportSuccess: function (user) {
                this.supports.push(user);
                this.addSupport = false;
            },
            closeAddSupport: function () {
                this.modifySupport = null;
                if (this.supports.length > 0) this.addSupport = false;
            },
            addGroup: function ($event) {
                const that = this;
                $.post('group/create', {groupName: $event.target.value}, function (result) {
                    that.groups.unshift(result);
                    that.selectedGroup = result;
                    that.selectedIndex = 0;
                    that.addSupport = false;
                    that.startAddGroup = false;
                });
            },
            showMenu: function () {
                this.hiddenMenu = false;
            },
            hideMenu: function () {
                this.hiddenMenu = true;
            },
            manager: function (group, index) {
                this.selectedIndex = index;
                this.selectedGroup = group;
            }
        },
        watch: {
            modifySupport:function (modifySupport) {
                this.addSupport = (modifySupport != null);
            },
            selectedGroup: function (selectedGroup) {
                this.addSupport = false;
                const that = this;
                $.post('/group/user/list', {groupId: selectedGroup.id}, function (result) {
                    if (result instanceof Array) {
                        that.supports = result;
                    }
                });
            },
            supports: function (supports) {
                if (supports.length == 0) this.addSupport = true;
            }
        },
        mounted(){
            const that = this;
            $.post('/group/list', {}, function (result) {
                if (result instanceof Array) {
                    that.groups = result;
                    if (that.groups.length > 0) {
                        that.selectedGroup = that.groups[0];
                        that.selectedIndex = 0;
                    }
                }
            });
        },
    }
</script>


<style scoped>
    .group {
        padding: 8px;
        border-bottom: 1px solid #f3f3f3;
        word-break: break-all;
        font-size: 14px;
        color: #666;
    }

    .group.active {
        background: #f7f7f7;
    }

    input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 14px;
        padding: 8px;
        border-bottom: 1px solid #f3f3f3;
    }

    input:focus {
        box-shadow: rgba(65, 161, 183, 0.5) 0px 0 12px 0px;
    }

    table td, table th {
        border: 1px solid #f3f3f3;
        padding: 4px;
    }
</style>
